<template>
  <div class="contationAccount">
    <!-- 搜索表单区域 -->
    <div>
      <!-- 内联表单，用于输入查询条件 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 商品名称输入框 -->
        <el-form-item label="商品名称">
          <el-input v-model="formInline.name" placeholder="请填写商品名称"></el-input>
        </el-form-item>
        <!-- 商品类别选择框，数据来源于 SData -->
        <el-form-item label="商品类别">
          <el-select v-model="formInline.sid" placeholder="请选择商品类别">
            <el-option :label="item.name" :value="item.id" v-for="item in SData" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 交易方式选择框 -->
        <el-form-item label="交易方式">
          <el-select v-model="formInline.deal" placeholder="请选择交易方式">
            <el-option label="线上交易" value="线上交易"></el-option>
            <el-option label="线下交易" value="线下交易"></el-option>
          </el-select>
        </el-form-item>
        <!-- 商品状态选择框 -->
        <el-form-item label="商品状态">
          <el-select v-model="formInline.status" placeholder="请选择商品状态">
            <el-option label="发布中" value="1"></el-option>
            <el-option label="已下架" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 表单操作按钮 -->
        <el-form-item>
          <!-- 查询按钮，点击时调用 loadProductData 方法 -->
          <el-button type="primary" @click="loadProductData">查询</el-button>
          <!-- 重置按钮，点击时调用 RestSubmit 方法 -->
          <el-button type="primary" @click="RestSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据表格和分页区域 -->
    <div>
      <!-- 数据表格，展示商品数据 -->
      <el-table
        :data="ProductData.slice((currentPage - 1) * PageSize, currentPage * PageSize)"
        border
        style="width: 100%">
        <!-- ID 列 -->
        <el-table-column prop="id" label="ID" width="60"> </el-table-column>
        <!-- 商品名称列，显示商品名称，超出部分显示提示 -->
        <el-table-column prop="name" label="商品名称" width="200" :show-overflow-tooltip="true"> </el-table-column>
        <!-- 商品类别列 -->
        <el-table-column prop="sname" label="商品类别" width="100"> </el-table-column>
        <!-- 商品描述列，显示商品描述，超出部分显示提示 -->
        <el-table-column prop="details" label="商品描述" width="200" :show-overflow-tooltip="true"> </el-table-column>
        <!-- 点击量列 -->
        <el-table-column prop="clicks" label="点击量" width="80"> </el-table-column>
        <!-- 原价列 -->
        <el-table-column prop="originalprice" label="原价" width="90"> </el-table-column>
        <!-- 现价列 -->
        <el-table-column prop="currentprice" label="现价" width="90"> </el-table-column>
        <!-- 交易方式列 -->
        <el-table-column prop="deal" label="交易方式" width="100"> </el-table-column>
        <!-- 交易地址列，显示交易地址，超出部分显示提示 -->
        <el-table-column prop="address" label="交易地址" width="300" :show-overflow-tooltip="true"> </el-table-column>
        <!-- 商品状态列，根据状态值显示不同文本 -->
        <el-table-column prop="status" label="商品状态" width="100">
          <template slot-scope="scope">
            {{scope.row.status == 1?'发布中':'已下架'}}
          </template>
        </el-table-column>
        <!-- 评论数量列 -->
        <el-table-column prop="comments" label="评论数量" width="100"></el-table-column>
        <!-- 操作列，包含查看评论按钮 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 查看评论按钮，点击时调用 loadComment 方法，传入商品 ID -->
            <el-button @click="loadComment(scope.row.id)" type="text" size="small">查看评论</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        background
        :page-sizes="[12, 20, 30, 40]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ProductData.length"
        @current-change="CurrentChange"
        @size-change="SizeChange"
      >
      </el-pagination>
    </div>
    <!-- 查看商品评论弹出层 -->
    <el-dialog
      title="查看商品评价"
      :visible.sync="dialogVisible"
      width="45%"
      :close-on-click-modal="false"
    >
      <div>
        <!-- 评论列表，使用 v-for 循环渲染评论项 -->
        <ul>
          <li v-for="item in comment" :key="item.id">
            <el-row class="buyer-describe">
              <!-- 评论者头像区域 -->
              <div class="buyer-headerimg">
                <img :src="item.userimgpath" />
              </div>
              <!-- 评论内容区域 -->
              <div class="buyer-sayed">
                <div style="flex: 15;">
                  <!-- 评论者用户名 -->
                  <div class="user">{{item.username}}</div>
                  <!-- 评论内容 -->
                  <div class="buyer-text">{{item.text}}</div>
                  <!-- 评论时间和屏蔽状态 -->
                  <div class="buyer-date">
                    {{item.time}}
                    <span v-if="item.status == 2" style="margin-left: 10px;">已屏蔽</span>
                  </div>
                </div>
                <div style="flex: 3;">
                  <!-- 屏蔽/解屏蔽按钮，根据评论状态显示不同操作 -->
                  <div v-if="item.status == '1'" @click="shield(item.id, item.pid, 2)" style="line-height: 90px;"><p>屏蔽</p></div>
                  <div v-else style="line-height: 90px;"><p @click="shield(item.id, item.pid, 1)">解屏蔽</p></div>
                </div>
              </div>
            </el-row>
          </li>
        </ul>
      </div>
    </el-dialog>
    <!-- 添加页脚组件 -->
    <Footer />
  </div>
</template>

<script>
  import Footer from './footer.vue'
  export default {
    components: {
      Footer
    },
    data() {
      return {
        // 存储商品数据列表
        ProductData: [],
        // 搜索表单的数据模型
        formInline: {
          name: null,
          sid: '',
          deal: null,
          status: null
        },
        // 存储商品评论列表
        comment: [],
        // 商品评论列表弹窗的显示状态
        dialogVisible: false,
        // 当前页码
        currentPage: 1,
        // 每页显示的数据条数
        PageSize: 12,
        // 存储商品类别数据
        SData: [],
      }
    },
    created() {
      // 页面加载时调用，获取商品数据
      this.loadProductData();
      // 页面加载时调用，获取商品类别数据
      this.loadSData();
    },
    methods: {
      // 请求商品数据列表的方法
      loadProductData() {
        // 使用 axios 发送 POST 请求获取商品数据，携带查询条件
        this.$axios.post('/Bproduct/selectProductCommentList', {
          name: this.formInline.name,
          sid: this.formInline.sid,
          deal: this.formInline.deal,
          status: this.formInline.status
        }).then(res => {
          // 将获取到的数据赋值给 ProductData
          this.ProductData = res.data;
        });
      },
      // 加载二级分类商品数据的方法
      loadSData() {
        // 使用 axios 发送 GET 请求获取商品类别数据
        this.$axios.get('/classify/selectScList').then(res => {
          // 将获取到的数据赋值给 SData
          this.SData = res.data;
        })
      },
      // 重置表单的方法
      RestSubmit() {
        // 重置表单数据
        this.formInline = {
          name: null,
          sid: '',
          deal: null,
          status: null
        };
        // 重新加载商品数据
        this.loadProductData();
      },
      // 加载商品评论的方法，传入商品 ID
      loadComment(id) {
        // 显示商品评论列表弹窗
        this.dialogVisible = true;
        // 使用 axios 发送 GET 请求获取商品评论数据，携带商品 ID
        this.$axios.get('/product/selectCommentById', {
          params: {
            id: id
          }
        }).then(res => {
          // 将获取到的评论数据赋值给 comment
          this.comment = res.data;
        })
      },
      // 分页时当前页码变化的回调方法
      CurrentChange(val) {
        this.currentPage = val;
      },
      // 分页时每页显示条数变化的回调方法
      SizeChange(val) {
        this.PageSize = val;
      },
      // 屏蔽/解屏蔽评论的方法，传入评论 ID、商品 ID 和目标状态
      shield(id, pid, status) {
        let message = '';
        // 根据目标状态设置提示信息
        if (status == 1) {
          message = "屏蔽已解除！";
        } else {
          message = "已屏蔽！";
        }
        // 使用 axios 发送 POST 请求更新评论状态
        this.$axios.post('/product/updateCommentById', {
          id: id,
          status: status
        }).then(res => {
          // 显示提示信息
          this.$message({
            type: 'success',
            message: message
          });
          // 重新加载商品评论数据
          this.loadComment(pid);
        });
      }
    }
  }
</script>

<style>
 .el-table {
    text-align-last: center;
    height: 733px;
    overflow: auto;
  }
 .contationAccount {
    padding: 20px;
    margin: 10px;
    margin-top: 0;
    min-height: 500px;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
 .el-pagination {
    margin-top: 20px;
    margin-right: 30px;
    float: right;
  }

  /* 评论模块 */
 .el-dialog {
    min-height: 40%;
  }
 .buyer-describe p {
    text-indent: 2em;
    padding: 0 15px;
    margin-bottom: 20px;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
  }

 .buyer-describe {
    min-height: 130px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #E0E0E0;
  }

 .buyer-headerimg {
    width: 15%;
    text-align: center;
  }

 .buyer-headerimg img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin: 10px;
  }

 .buyer-sayed {
    width: 80%;
    padding-right: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

 .buyer-sayed .user {
    margin-top: 20px;
    color: #6d757a;
    cursor: pointer;
  }
 .buyer-sayed .buyer-text {
    min-height: 60px;
  }

 .buyer-sayed .buyer-date {
    font-size: 13px;
    color: #99a2aa;
  }
 .buyer-sayed p:hover {
    cursor: pointer;
    color: #EE5757;
  }
 .operation {
    width: 10%;
  }

  /* 移动端适配 */
  @media screen and (max-width: 768px) {
   .contationAccount {
      padding: 10px;
      margin: 5px;
      width: 100%;
    }
   .el-pagination {
      margin: 10px;
      float: none;
      text-align: center;
    }
   .buyer-describe {
      flex-direction: column;
      align-items: flex-start;
    }
   .buyer-headerimg {
      width: 100%;
      text-align: left;
    }
   .buyer-sayed {
      width: 100%;
      padding-right: 0;
    }
  }
</style>